<template>
  <div class="footer" :class="{'fixed': isFixed}">
    <!-- 其他消息 -->
    <slot name="note"></slot>
    <!-- 点击按钮，默认 -->
    <slot name="btn">
      <div class="btn-box">
        <a class="btn" :disabled="disabled" href="javascript:;" @click="buy">{{ btnText }}</a>
      </div>
    </slot>
  </div>
</template>

<script>
export default {
  props: {
    isFixed: {
      type: Boolean,
      default: false,
    },
    disabled: {
      type: Boolean,
      default: true,
    },
    btnText: {
      type: String,
      default: '立即购买'
    }
  },
  methods: {
    buy() {
      if (this.disabled) {
        return false;
      }
      this.$emit('buy');
    }
  }
};
</script>

<style lang="less" scoped>
.footer {
  width: 100%;
  &.fixed{
    position: fixed;
    left: 0;
    bottom: 0;
  }
  .btn-box{
    .btn {
      width: 100%;
      font-size: 18px;
      color: #fff;
      text-align: center;
      line-height: 50px;
      display: inline-block;
      background-image: linear-gradient(90deg, #3861FE 0%, #489BFE 100%);
      &[disabled=disabled]{
        color: #72819B;
        background-image: linear-gradient(90deg, #B5C6E5 0%, #E2E8F2 100%);
      }
    }
  }
}
</style>